﻿<%@ Page Title="" Language="C#" MasterPageFile="~/skin.Master" AutoEventWireup="true" CodeBehind="5site.aspx.cs" Inherits="DataShow._5site" %>

<%@ Register Src="/ascx/5site1.ascx" TagName="NUD" TagPrefix="UC" %>
<%@ Register Src="/ascx/5site2.ascx" TagName="NUD2" TagPrefix="UC" %>
<asp:Content ID="Content1" ContentPlaceHolderID="home_header" runat="server">
    <link href="/css/lib/bootstrap.datepicker.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        label {
            display: inline-block;
            margin-bottom: 10px;
        }

        #sendpoints, #rbl_element ,#rbl_sendpoint{
            display: inline-block;
            height: 18px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph_home" runat="server">
    <div style="margin-top: 10px;">
        <ul class="breadcrumb">
            <li><a href="/Index.aspx">首页</a> <span class="divider">/</span></li>
            <li class="active">预报列表显示(分站点）</li>
        </ul>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>功能栏</h5>
                </div>
                <div class="widget-content nopadding">
                    <div class="field-box inline">
                        <label>日期:</label>
                        <asp:TextBox runat="server" ID="txt_date" ClientIDMode="Static" CssClass="input-large datepicker" />
                    </div>
                    <div class="field-box inline">
                        <label>发报时刻:</label>
                        <asp:RadioButtonList runat="server" ID="rbl_sendpoint" ClientIDMode="Static" RepeatColumns="3" RepeatDirection="Horizontal" RepeatLayout="Table">
                            <asp:ListItem Text="H06" Value="H06" Selected="True" />
                            <asp:ListItem Text="H10" Value="H10" />
                            <asp:ListItem Text="H16" Value="H16" />
                        </asp:RadioButtonList>
                    </div>
                    <div class="field-box inline">
                        <label>要素:</label>
                        <asp:RadioButtonList runat="server" ID="rbl_element" ClientIDMode="Static" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Table">
                            <asp:ListItem Text="最高温" Value="maxt" Selected="True" />
                            <asp:ListItem Text="最低温" Value="mint" />
                        </asp:RadioButtonList>
                    </div>
                    <asp:Button runat="server" ID="btn_search" CssClass="btn-primary btn" Text="搜索"  style="margin-bottom: 10px;" OnClick="btn_search_Click" />
                </div>
            </div>
        </div>
    </div>


    <div class="row-fluid">
        <div class="span12">
            <div class="widget-box" style="margin-top: 0">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>搜索结果</h5>
                </div>
                <div class="widget-content nopadding" style="overflow-x:scroll">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active"><a href="#home" data-toggle="tab">044</a></li>
                        <li><a href="#profile" data-toggle="tab">036</a></li>
                        <li><a href="#yg" data-toggle="tab">040</a></li>
                        <li><a href="#gy" data-toggle="tab">047</a></li>
                        <li><a href="#gn" data-toggle="tab">048</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="home">
                            <UC:NUD runat="server" ID="und_lyg1" StationCode="58044" />
                        </div>
                        <div class="tab-pane fade" id="profile">
                            <UC:NUD runat="server" ID="und_dh1" StationCode="58036" />
                        </div>
                        <div class="tab-pane fade" id="yg">
                            <UC:NUD runat="server" ID="und_gy1" StationCode="58040" />
                        </div>
                        <div class="tab-pane fade" id="gy">
                            <UC:NUD runat="server" ID="und_guanyun1" StationCode="58047" />
                        </div>
                        <div class="tab-pane fade" id="gn">
                            <UC:NUD runat="server" ID="und_gn1" StationCode="58048" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="widget-box" style="margin-top: 0">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>搜索结果</h5>
                </div>
                <div class="widget-content nopadding">
                    <ul id="myTab1" class="nav nav-tabs">
                        <li class="active"><a href="#home1" data-toggle="tab">24</a></li>
                        <li><a href="#profile1" data-toggle="tab">48</a></li>
                        <li><a href="#yg1" data-toggle="tab">72</a></li>
                        <li><a href="#gy1" data-toggle="tab">96</a></li>
                        <li><a href="#gn1" data-toggle="tab">120</a></li>
                        <li><a href="#t144" data-toggle="tab">144</a></li>
                        <li><a href="#t168" data-toggle="tab">168</a></li>
                    </ul>
                    <div id="myTab1Content" class="tab-content">
                        <div class="tab-pane fade in active" id="home1">
                            <UC:NUD2 runat="server" ID="NUD1" Span="FD00_24" />
                        </div>
                        <div class="tab-pane fade" id="profile1">
                            <UC:NUD2 runat="server" ID="NUD2" Span="FD24_48" />
                        </div>
                        <div class="tab-pane fade" id="yg1">
                            <UC:NUD2 runat="server" ID="NUD3" Span="FD48_72" />
                        </div>
                        <div class="tab-pane fade" id="gy1">
                            <UC:NUD2 runat="server" ID="NUD4" Span="FD72_96" />
                        </div>
                        <div class="tab-pane fade" id="gn1">
                            <UC:NUD2 runat="server" ID="NUD5" Span="FD96_120" />
                        </div>
                        <div class="tab-pane fade" id="t144">
                            <UC:NUD2 runat="server" ID="NUD6" Span="FD120_144" />
                        </div>
                        <div class="tab-pane fade" id="t168">
                            <UC:NUD2 runat="server" ID="NUD7" Span="FD144_168" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="home_script" runat="server">
    <script src="/js/bootstrap.datepicker.js"></script>
    <script type="text/javascript">
        $("td>input").css("margin", '0');
        $("td>label").css("margin", '0');
        // datepicker plugin
        $('.datepicker').datepicker({ format: 'yyyy-mm-dd' }).on('changeDate', function (ev) {
            $(this).datepicker('hide');
        });

        //统计平均值
        $(".condition").change(function () {
            var use = this.checked;
            var $spans = $(this).parent().parent().find('span');
            $spans.each(function () {
                if (use) {
                    $(this).data("use", "1");
                    $(this).parent().siblings("td:gt(0)").each(function () {
                        $(this).children("span").css("display", "inline");
                    })
                }
                else {
                    $(this).data("use", "0");
                    $(this).css("display", "none");
                  
                }
            })
            CalculateAverage();
        })

        //计算平均值
        function CalculateAverage() {
            $(".average").each(function () {
                var index = $(this).parent().index()
                var $rows = $(this).parent().parent().parent().children("tr")
                var count=0, total=0;
                for (var i = 0; i < $rows.length-1; i++) {
                    var $row = $rows.eq(i);
                    var $tds = $row.children("td");
                    if ($tds.length!=0) {
                        var $span = $row.children("td").eq(index).children("span");
                        var cellValue = $span.text();
                        var use = $span.data("use");
                        if (use == "1" && cellValue) {
                            count++;
                            total += parseFloat(cellValue);
                            console.log(cellValue)
                        }
                    }
                }
                var result = (total / count).toFixed(2)
                if (result.toString() == "NaN") {
                    result = "";
                }
                $(this).text(result);
            })
        }
        CalculateAverage();

    </script>
</asp:Content>
